<template>
  <el-card class="container-card">
    <el-form
      :model="recruitmentForm"
      :rules="rules"
      ref="recruitmentForm"
      label-width="150px"
      class="recruitmentFormData"
    >
      <el-form-item label="职位名称：" prop="pname">
        <el-input
          v-model="recruitmentForm.pname"
          placeholder="请填写职位名称信息，可填写职位属性，如：货运司机包吃住"
          style="width: 50%"
        ></el-input>
      </el-form-item>

      <el-form-item label="所在地区：" prop="location">
        <el-cascader
          size="large"
          :options="options"
          v-model="recruitmentForm.location"
          style="width: 50%"
          placeholder="请选择工作地点"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item label="薪资待遇：" prop="salary">
        <el-input
          v-model="recruitmentForm.salaryMin"
          style="width: 20%; margin-right: 10px"
          placeholder="最低薪资"
        >
          <i slot="suffix">元/月</i>
        </el-input>
        <el-input
          v-model="recruitmentForm.salaryMax"
          style="width: 20%; margin-right: 10px"
          placeholder="最高薪资"
        >
          <i slot="suffix">元/月</i>
        </el-input>
        <el-checkbox v-model="ftof">面议</el-checkbox>
      </el-form-item>

      <el-form-item label="招聘人数：" prop="pnumber">
        <el-input
          v-model="recruitmentForm.pnumber"
          placeholder="请填写招聘人数"
          style="width: 20%"
        >
          <i slot="suffix">人</i>
        </el-input>
      </el-form-item>

      <el-form-item label="招聘要求：" prop="requirement">
        <el-select
          v-model="recruitmentForm.education"
          filterable
          clearable
          placeholder="请选择学历要求"
          style="width: 20%; margin-right: 10px"
        >
          <el-option
            v-for="item in educationOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select
          v-model="recruitmentForm.experience"
          filterable
          placeholder="请选择经验要求"
          clearable
          style="width: 20%"
        >
          <el-option
            v-for="item in experienceOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="职位描述：" prop="describe">
        <quill-editor
          style="width: 60%"
          v-model="recruitmentForm.describe"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <!-- <div v-html="str" class="ql-editor">
          {{ str }}
        </div> -->
      </el-form-item>

      <el-form-item label="从事行业：" prop="industry">
        <el-select
          v-model="recruitmentForm.industry"
          filterable
          clearable
          placeholder="请选择从事行业"
          style="width: 20%"
        >
          <el-option
            v-for="item in industryOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="福利待遇：" prop="welfare">
        <el-checkbox-group v-model="welfare">
          <el-checkbox
            v-for="item in welfareOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <el-button
          size="medium"
          round
          type="primary"
          style="width: 20%; margin: 20px"
          @click="submitForm('recruitmentForm')"
        >
          保存信息
        </el-button>
        <el-button size="medium" round @click="resetForm('recruitmentForm')">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { regionData } from "element-china-area-data";
import {
  educationOption,
  experienceOption,
  industryOption,
  welfareOption,
} from "./enum";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      content: ``,
      str: "",
      editorOption: {},
      educationOption,
      experienceOption,
      industryOption,
      welfareOption,
      welfare: [],
      options: regionData,
      ftof: false,
      recruitmentForm: {
        pname: "", //职位名称
        location: [], //所在地区
        salary: {
          salaryMin: "",
          salaryMax: "",
        }, //薪资待遇
        describe: "",
      },
      rules: {
        pname: [
          { required: true, message: "请填写职位名称", trigger: "change" },
        ],
        location: [
          { required: true, message: "请选择工作地点", trigger: "change" },
        ],
        salary: [
          { required: true, message: "请填写工资待遇", trigger: "change" },
        ],
        pnumber: [
          { required: true, message: "请填写工资待遇", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, "<");
      str = str.replace(/&gt;/g, ">");
      return str;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            showClose: true,
            message: "发布成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "出错了，请检查填写信息是否正确",
            type: "error",
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    let content = ""; // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(content);
  },
};
</script>

<style scoped>
.container-card {
  margin: 13px;
  height: 100%;
}
</style>